<script setup>
import { loginApi } from '@/api/sysUser';
import router from '@/router';
import { userUserStore } from '@/stores/user';
import { ElMessage } from 'element-plus';
import { ref } from 'vue';


/**
 * 登入表单
 */
const loginForm = ref({
  userAccount: "",
  userPassword: "",
})
const loginFormRef = ref(null)
/**
 * 登入表单规则
 */
const loginFormRule = ref({
  userAccount: [
    { required: true, message: "不能为空", trigger: "blur" },
    { min: 2, max: 10, message: "长度为2到10", trigger: "blur" },
  ],
  userPassword: [
    { required: true, message: "不能为空", trigger: "blur" },
    { min: 2, max: 20, message: "长度为2到20", trigger: "blur" },
  ],
})
const resultLoginForm = () => {
  loginFormRef.value.resetFields()
}
/**
 * 登入方法
 */
const login= () => {
  loginFormRef.value.validate(async(valid)=>{
    if (!valid) {
      ElMessage({
        message: "登入失败",
        type: "error",
      });
      return;
    }
    const res = await loginApi(loginForm.value)
    userUserStore().setUserInfo(res.data)
    router.push('layout')
  })
}
</script>

<template>
  <div class="login_container">
    <div class="login_box">
      <div class="avatar_box">
        <img src="../../assets/img/wx.jpg" alt="">
      </div>
      <el-form ref="loginFormRef" label-width="0px" class="login_form" :model="loginForm" :rules="loginFormRule">

        <el-form-item prop="userAccount">
          <el-input v-model="loginForm.userAccount" prefix-icon="User" />
        </el-form-item>

        <el-form-item prop="userPassword">
          <el-input v-model="loginForm.userPassword" prefix-icon="Hide" type="password"/>
        </el-form-item>

        <el-form-item class="btns">
          <el-button type="success" @click="login">登入</el-button>
          <el-button type="info" @click="resultLoginForm">重置</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>


<style scoped lang='scss'>
.login_container {
  background-color: #2b4b6b;
  height: 100%;
}

.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
}

.btns {
  display: flex;
  justify-content: flex-end;
  margin-left: 60%;
}

.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
</style>
